import React,{useState, useRef } from 'react'

import {  Button, Modal, Table, Tag, Space, } from "antd"
import TodoListModal from './components/TodoListModal'
let initialData = [
    {
        key: "1",
        name: "John Brown",
        age: 32,
        address: "New York No. 1 Lake Park",
      },
      {
        key: "2",
        name: "Jim Green",
        age: 42,
        address: "London No. 1 Lake Park",
      },
      {
        key: "3",
        name: "Joe Black",
        age: 32,
        address: "Sidney No. 1 Lake Park",
      }
]
export default function Todo() {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [data, setData] = useState(initialData)  //  table 的数据
    const [columns, setColumns] = useState([
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          render: (text) => <a>{text}</a>
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age"
        },
        {
          title: "Address",
          dataIndex: "address",
          key: "address"
        },
        {
          title: "operation",
          key: "action",
          render: (text, record) => (
            <Space size="middle">
              <a onClick={() => deleteItem(record)} >Delete</a>
              {/* <a>Update {record.name}</a> */}
              <a onClick={() => {addUser("updata", record)}}>Update </a>
            </Space>
          )
        }
    ])  //  table 的配置文件
    const [dataItem, setDataItem] = useState({})
    const [updata, setUpdata] = useState(false)
    const refModal = useRef(null)
    
    function showModal(obj) {
        setUpdata(false)
        setIsModalVisible(!isModalVisible)
    }

    function getValue(obj, updata) {
        let newObj = {key: data[data.length-1].key+"1w", name: obj.Name, address: obj.Address, age: obj.Age }
        // console.log("父",newObj)
        
        if(updata) {
            console.log(newObj)
            console.log("------更新", initialData.findIndex(i => i.key == obj.key))
            
            initialData.splice(initialData.findIndex(i => i.key == obj.key), 1, {name: obj.Name, key: obj.key, age: obj.Age, address: obj.Address})
            console.log("++++",initialData)
            setData([...initialData])
        } else {
            initialData.push(newObj)
            setData([...initialData])
        }
    }
    function deleteItem(record) { // 删除按钮
        // console.log("删除", record)
        initialData = initialData.filter(f => f.key !== record.key)
        setData(initialData)
    }

    function addUser(dataType, record) { // 更新
        setIsModalVisible(!isModalVisible)
        if(dataType == "updata") {
            console.log("修改",  record)
            setDataItem(record)
            setUpdata(true)
        }
    }

    
  return (
    <div>
        <Button type="primary" onClick={showModal}> Open Modal</Button>
        <Table columns={columns} dataSource={data} pagination={false}/>
        <TodoListModal 
                ref={refModal}
                isModalVisible={isModalVisible} 
                showModal={showModal}
                getValue={getValue}
                dataItem={dataItem}
                updata={updata} />
    </div>
  )
}
